import * as echarts from "echarts";

/**
 * 添加方式：
 * 在 EchartsConfigType echartsConfig 定义
 * 页面已设置了 display: flex，会根据配置渲染出图表
 */

export const EchartsConfigType = {
  BAR: "bar",
  LINE: "line",
  LINEPLUS: "line-plus",
  PIE: "pie",
};

const echartsConfig = {
  [EchartsConfigType.BAR]: {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "Direct",
        type: "bar",
        barWidth: "60%",
        data: [10, 52, 200, 334, 390, 330, 220],
      },
    ],
  },
  [EchartsConfigType.LINE]: {
    xAxis: {
      data: ["A", "B", "C", "D", "E"],
    },
    yAxis: {},
    series: [
      {
        data: [10, 22, 28, 43, 49],
        type: "line",
        stack: "x",
      },
      {
        data: [5, 4, 3, 5, 10],
        type: "line",
        stack: "x",
      },
    ],
  },
  [EchartsConfigType.LINEPLUS]: {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "Email",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: "Union Ads",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: "Video Ads",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [150, 232, 201, 154, 190, 330, 410],
      },
      {
        name: "Direct",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [320, 332, 301, 334, 390, 330, 320],
      },
      {
        name: "Search Engine",
        type: "line",
        stack: "Total",
        label: {
          show: true,
          position: "top",
        },
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [820, 932, 901, 934, 1290, 1330, 1320],
      },
    ],
  },
  [EchartsConfigType.PIE]: {
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        name: "商品",
        type: "pie",
        radius: "50%",
        data: [
          { value: 1048, name: "鞋子" },
          { value: 735, name: "袜子" },
          { value: 580, name: "运动服" },
          { value: 484, name: "运动鞋" },
          { value: 300, name: "网球" },
          { value: 300, name: "棒球" },
          { value: 300, name: "网球拍" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  },
};

const handleSetEcharts = (type) => {
  const option = echartsConfig[type];
  const chartBox = echarts.init(document.getElementById(type));
  chartBox && chartBox.setOption(option);
};

export const setAllEcharts = () => {
  Object.values(EchartsConfigType).forEach((type) => {
    handleSetEcharts(type);
  });
};
